<template>
	<view class="lz-popup">
		<u-popup :show="onoff" mode="left" @close="closeFn" :safeAreaInsetTop="true">
			<view style="width: 500rpx;background: linear-gradient(180deg,#292d39,#292d39);overflow: auto;" :style="{height:$u.sys().screenHeight+'px'}">
				<view class="p-4 text-lg text-white">{{title}}</view>
				<view class="p-4 py-2">
					<u-search :placeholder="$t('bibi.qsrssgjc')" v-model="search.keyword" :showAction="false" bgColor="#484859"></u-search>
				</view>
				<view class="pb-2 w-full" style="border-bottom: 1px solid #3c4254;border-top: 1px solid #3c4254;">
					<u-tabs :list="tabs.list" :current="tabs.current" @click="clicktabs" :activeStyle="{color: '#ceb359'}"
					:inactiveStyle="{ color: '#8b8baa' }" :itemStyle="{ height: '44px', width:'16%' }" 
					lineColor="#ceb359" lineWidth="30" lineHeight="2" style="width: 100%;"></u-tabs>
				</view>
				<view class="flex justify-around py-2">
					<view>{{$t('bibi.jiaoyidui')}}</view>
					<view>{{$t('bibi.zuixingjia')}}</view>
					<view>{{$t('bibi.zhangdiefu')}}</view>
				</view>
				<view class="flex justify-around py-2 overflow-auto" v-for="(item,index) in list" :key="index">
					<view class="text-white">{{item.name}}</view>
					<view>{{item.jiage}}</view>
					<view :class="item.isRise==true?'green':'red'">{{item.zdf}}</view>
				</view>
			</view>
			
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		props: {
			title: {
				type: String,
				default: ""
			},
			mode: {
				type: String,
				default: "bottom"
			},
		},
		computed: {
			...mapGetters(['userInfo', 'api', 'config']),
		},
		components: {},
		data() {
			return {
				onoff:false,
				// 搜索
				search:{
					keyword:''
				},
				// 分类
				tabs:{
					current:0,
					list:[{name: 'USDT',id:0},{name: 'BTC',id:1},{name: 'ETH',id:2},{name: '自選',id:2}]
				},
				list:[
					{name:'BTC/USDT',jiage:1015.22,zdf:'+0.29%',isRise:true},
					{name:'BTC/USDT',jiage:1015.22,zdf:'-0.29%',isRise:false},
					{name:'BTC/USDT',jiage:1015.22,zdf:'-0.29%',isRise:false},
					{name:'BTC/USDT',jiage:1015.22,zdf:'-0.29%',isRise:false},
					{name:'BTC/USDT',jiage:1015.22,zdf:'-0.29%',isRise:false},
					{name:'BTC/USDT',jiage:1015.22,zdf:'-0.29%',isRise:false},
					{name:'BTC/USDT',jiage:1015.22,zdf:'-0.29%',isRise:false},
					{name:'BTC/USDT',jiage:1015.22,zdf:'-0.29%',isRise:false},
					{name:'BTC/USDT',jiage:1015.22,zdf:'-0.29%',isRise:false},
					{name:'BTC/USDT',jiage:1015.22,zdf:'-0.29%',isRise:false},
					{name:'BTC/USDT',jiage:1015.22,zdf:'-0.29%',isRise:false},
					{name:'BTC/USDT',jiage:1015.22,zdf:'-0.29%',isRise:false},
					{name:'BTC/USDT',jiage:1015.22,zdf:'-0.29%',isRise:false},
					{name:'BTC/USDT',jiage:1015.22,zdf:'-0.29%',isRise:false},
					{name:'BTC/USDT',jiage:1015.22,zdf:'-0.29%',isRise:false},
					{name:'BTC/USDT',jiage:1015.22,zdf:'+0.29%',isRise:true},
				]
			}
		},
		mounted(op) {
		},
		methods: {
			clicktabs(item) {
				console.log('item', item);
			},
			show(){
				this.onoff=true
			},
			closeFn(){
				this.onoff=false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.lz-popup{
		color: #9FA6B5;
	}
</style>